import { Button, Card, Flex, SwipeAction, Tag } from "@/components/base";
import { Typography } from "@/components/typography";
import Icon from "@ant-design/icons";
import I005 from '../../icons/I005.svg?react';

const { Text } = Typography;

/** 负责人 */
export function PersonInCharge() {
    return (
        <Card style={{ width: '100%' }}>
            <Flex justify="space-between">
                <Text size={16} strong style={{ display: 'block', marginBottom: '16px', color: '#372aac' }}>
                    <Icon component={I005} style={{ marginRight: 6 }} />
                    负责人
                </Text>
                <Button size="small">增加</Button>
            </Flex>
            <Flex vertical gap={16}>
                <PersonInChargeCard />
                <PersonInChargeCard />
            </Flex>
        </Card>
    )
}

function PersonInChargeCard() {
    return (
        <SwipeAction
            style={{ width: '100%' }}
            rightActions={[
                { text: '删除', key: 'delete', color: 'red' }
            ]}
        >
            <Flex vertical>
                <Flex gap={8} align='center' style={{ width: '100%' }}>
                    <Text style={{ color: '#372aac' }} >姓名</Text>
                    <Tag color="#372aac" fill="outline">50%</Tag>
                </Flex>
                <Text size={12} style={{ color: '#372aac' }}>2024-01-01</Text>
            </Flex>
        </SwipeAction>
    )
}